<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/index.css">
    <script src="/index.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>

        </div>
        <div class="container">
            性别筛选：
            <select class="genderFilter">
                <option value="0">默认</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>

            年龄排序：
            <select class="ageSort">
                <option value="0">默认</option>
                <option value="-1">年龄由大到小</option>
                <option value="1">年龄由小到大</option>
            </select>
        </div>

        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        //初始化页面数据
        ajax({
            url: "/getdata",
            type: "get",
            success: function (res) {
            renderDom(res);
            },
        });
        //  第一步 操作数据 ；  第二步 渲染视图 ；
        var usernameEle = document.querySelector("#username");
        var ageEle = document.querySelector("#age");
        var genderEle = document.querySelector("#gender");
        var addBtnEle = document.querySelector("#addBtn");
        
        var sortBtn = document.querySelector("#sortBtn");

        addBtnEle.onclick = function(){
            let xhr = new XMLHttpRequest();
            xhr.open("post", "/addPostUser");
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.responseText);
                    let {info,status} = JSON.parse(xhr.responseText);
                    if(status===1){
                        alert(info);
                        ajax({
                            url: "/getdata",
                            type: "get",
                            success: function (res) {
                            renderDom(res);
                            },
                        });
                    }
                }
            }
            let data = `username=${usernameEle.value}&age=${ageEle.value}&gender=${genderEle.value}`;
            xhr.send(data);
            
        }

        sortBtn.onclick = function () {
            // 数据排序 
            ajax({
                url: "/sortdata",
                type: "get",
                success: function (res) {
                renderDom(res);
                },
            });
        }

        
        // 一、性别的筛选  ；
        // 记录 年龄 和 性别 筛选的状态
        let genderIndex = ""; 
        let ageIndex = "";  
        const genderFilterEle = document.querySelector(".genderFilter");
        genderFilterEle.onchange = function () {   
            genderIndex=this.value;
            ajax({
                url: "/genderfilter",
                type: "get",
                data:{gender:this.value},
                success: function (res) {
                renderDom(res);
                },
            });

        }
        // 二、年龄排序 
        const ageSortEle = document.querySelector(".ageSort");
        ageSortEle.onchange = function(){  
            ageIndex = this.value;
            ajax({
                url: "/sortage",
                type: "get",
                data:{gender:genderIndex,age:this.value},
                success: function (res) {
                renderDom(res);
                },
            });

        }

    </script>
</body>

</html>